<template>
    <div>
        <el-dialog
                title="修改昵称"
                :visible.sync="changename"
                width="35%"
                :before-close="handleClose">
            <input type="text" placeholder="请输入新昵称" v-model="personalName">
            <span slot="footer" class="dialog-footer">
            <el-button @click="changename = false">取 消</el-button>
             <el-button type="primary" @click="changeNameMsaaage">确 定</el-button>
             </span>
        </el-dialog>
        <el-dialog
                title="修改密码"
                :visible.sync="changepassword"
                width="35%"
                :before-close="handleClose"
                class="changepassword-box">
            <input type="password" placeholder="请输入旧密码" v-model="oldPwd">
            <input type="password" placeholder="请输入新密码" v-model="newPwd">
            <input type="password" placeholder="请再次输入新密码" v-model="againPwd">
            <input type="text" placeholder="请输入手机号" v-model="mbPhone">
            <div style="display: flex">
                <input type="text" placeholder="请输入验证码" class="getcode-input" v-model="phoneCode">
                <button class="getcode-btn2" @click="getphoneCode" ref="pwd" :disabled="isClick">{{pwdNum}}</button>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="changepassword = false">取 消</el-button>
             <el-button type="primary" @click="changePwd">确 定</el-button>
             </span>
        </el-dialog>
        <el-dialog
                title="修改手机号"
                :visible.sync="changephone"
                width="35%"
                :before-close="handleClose">
            <input type="text" placeholder="请输入新手机号" v-model="newPersonalPhone">
            <input type="text" placeholder="请输入验证码" class="code-input" v-model="newCode">
            <button class="getcode-btn" ref="code" @click="changePersonalPhone" :disabled="isdisabled">{{num}}</button>
            <span slot="footer" class="dialog-footer">
            <el-button @click="changephone = false">取 消</el-button>
             <el-button type="primary" @click="changePhonePer">确 定</el-button>
             </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        changeCode,
        changeNameRequest,
        changePassword,
        changePasswordCode,
        changePhone
    } from "../../../api/personal";

    export default {
        name: "personalBounced",
        data(){
            return{
                handleClose:"",
                changename: false,//修改昵称模态框
                changephone:false,//修改手机号模态框
                changepassword:false,//修改密码模态框
                personalName:"",//新昵称
                newPersonalPhone:"",//修改手机号的手机号
                newCode:"",//修改手机号的验证码
                num:"获取验证码",//修改手机号获取验证码倒计时
                isdisabled:false,//修改手机号获取验证码禁用
                countdown:"",//修改手机号定时器
                oldPwd:"",//旧密码
                newPwd:"",//新密码
                againPwd:"",//再次输入新密码
                mbPhone:"",//修改密码手机号
                phoneCode:"",//修改密码验证码
                pwdNum:"获取验证码",//修改密码获取验证码倒计时
                isClick:false,//修改密码获取验证码禁用
                pwdCountdown:""//修改密码定时器
            }
        },
        props:{
            changePhone:Boolean,
            changeName:Boolean,
            changePassword:Boolean
        },
        methods:{
            //修改昵称
            changeNameMsaaage(){
                console.log(11111)
                this.changename=false
                changeNameRequest(this.personalName,0,12323).then(res=>{
                    console.log(res)
                    this.$store.commit("judgeLogin",{isLogin:true,userInfo:res.data.userInfo})
                })
            },
            //修改手机号
            changePersonalPhone(){
                changeCode(this.newPersonalPhone).then(res=>{
                    console.log(res)
                   if(res.data.msg=="操作成功"){
                       this.num=60;
                       this.isdisabled=true
                       this.$refs.code.style.backgroundColor="#f4f4f4"
                       this.$refs.code.style.color="black"
                       this.countdown=setInterval( () =>{
                           console.log(this)
                           this.num=this.num-1;
                           if(this.num==0){
                               clearInterval(this.countdown)
                               this.isdisabled=false
                               this.num="获取验证码";
                               this.$refs.code.style.backgroundColor="#23db9b"
                               this.$refs.code.style.color="white"
                           }
                       },1000)
                   }else{
                       alert("手机号未注册/不正确")
                   }

                })
            },
            changePhonePer(){
                changePhone(this.newPersonalPhone,this.newCode).then(res=>{
                    console.log(res)
                    this.$store.commit("judgeLogin",{isLogin:true,userInfo:res.data.userInfo})
                    alert("修改手机号成功")
                })
            },
            //点击获取修改密码验证吗
            getphoneCode(){

                changePasswordCode(this.mbPhone).then(res=>{
                    console.log(res)
                    if(res.data.msg=="操作成功") {
                        this.pwdNum=60;
                        this.isClick=true
                        this.$refs.pwd.style.backgroundColor="#f4f4f4"
                        this.$refs.pwd.style.color="black"
                        this.pwdCountdown = setInterval(() => {
                            console.log(this)
                            this.pwdNum = this.pwdNum - 1;
                            if (this.pwdNum == 0) {
                                clearInterval(this.pwdCountdown)
                                this.isClick = false
                                this.pwdNum = "获取验证码";
                                this.$refs.pwd.style.backgroundColor = "#23db9b"
                                this.$refs.pwd.style.color = "white"
                            }
                        }, 1000)
                    }else{
                        alert("手机号未注册/不正确")

                    }
                })
            },
            changePwd(){
                this.changepassword=false
                changePassword(this.oldPwd,this.newPwd,this.againPwd,this.mbPhone,this.phoneCode).then(res=>{
                    console.log(res)
                    this.$store.commit("judgeLogin",{isLogin:true,userInfo:res.data.userInfo})
                    alert("修改密码成功")
                })
            }
        },
        watch:{
            changePhone(){
                console.log(55555555555)
                this.changephone=true
            },
            changeName(){
                this.changename=true
            },
            changePassword(){
                this.changepassword=true
            }
        }
    }
</script>

<style scoped lang="less">
    /*弹出模态框之修改密码*/
    /deep/.changepassword-box {
    input {
        margin-bottom: 20px!important;
    }
    .getcode-input {
        width: 50%;
    }
    .getcode-btn2 {
        width: 102px;
        height: 32px;
        color: #fff;
        background-color: #00cf8c;
        border-color: #00cf8c;
        margin-left: 20px;
    }
    }
    /*弹出模态框之修改手机号*/
    .code-input {
        margin-top: 20px!important;
    }
    /deep/
    .code-input:focus{
        border: 1px solid #00cf8c!important;
    };
    /deep/
    .getcode-btn {
        width: 102px;
        height: 32px;
        color: #fff;
        background-color: #00cf8c;
        border-color: #00cf8c;
        margin-top: 20px;
    }
    .getcode-btn:hover {;
        background-color: #23db9b;
        border-color: #23db9b;
    }
    /*弹出模态框之修改昵称*/
    /deep/.el-dialog__body,
    /deep/.el-dialog__header {
        border-bottom: 1px solid #e8e8e8;
        box-sizing: border-box;
    }
    /deep/.el-dialog__header {
        padding: 16px 24px;
        color: rgba(0,0,0,.65);
        background: #fff;
        height: 55px;
    }
    /deep/.el-dialog__body {
            padding: 36px;
            font-size: 14px;
            line-height: 1.5;
            word-wrap: break-word;
        /*height: 80px;*/
        input {
            width: 100%;
            height: 32px;
            box-sizing: border-box;
            margin: 0;
            padding: 4px 11px;
        }
        input:hover {
            border-color: #00cf8c!important;
        }
    }
    /deep/.el-dialog__footer {
            padding: 10px 16px;
            text-align: right;
        .el-button {
            width: 64px;
            height: 32px;
            margin-left: 10px;
            box-sizing: border-box;
            padding: 0;
        }
        .el-button--primary {
            color: #fff;
            background-color: #23db9b;
            border-color: #23db9b;
        }
    }

</style>